<template>
  <div class="container">
    <van-tabs v-model="active" color="#01A0EF" @change="clickChange">
      <van-tab title="论坛">
        <Nodata v-if="isNoData"></Nodata>
        <div v-else class="content-box">
          <van-list v-model="loading" :finished="finished" @load="onLoad" :offset="0">
            <van-swipe-cell
              :left-width="$route.query.id==1?65:0"
              :right-width="65"
              :on-close="onCloseCommunity"
              v-for="(item, index) in dataList"
              :key="index"
              @click="acivt(item)"
            >
              <span slot="left">编辑</span>
              <van-cell-group :border="false">
                <van-cell @click.stop="edit('community',item)">
                  <template slot="title">
                    <van-row class="container-header" type="flex" justify="space-between">
                      <van-col class="van-ellipsis">
                        <div class="name">
                          <div class="avatar">
                            <img
                              :src="item.portrait?item.portrait:'https://gw.alicdn.com/tfs/TB15Q0lOmzqK1RjSZFHXXb3CpXa-400-400.png'"
                              width="100%"
                              alt
                            >
                          </div>
                          <div class="username">
                            <p class="nams">{{ item.create_username }}</p>
                            <p class="times">{{ item.create_time }}</p>
                          </div>
                        </div>
                        <!-- <div class="title_topic">#{{item.articletype_name}}#</div> -->
                        <h2 class="content-title one-txt-cut">{{ item.article_title }}</h2>
                      </van-col>
                      <van-col>
                        <div class="content-img" v-if="item.file_path">
                          <img :src="item.file_path" width="100%" alt>
                        </div>
                      </van-col>
                    </van-row>
                  </template>
                </van-cell>
              </van-cell-group>
              <span v-if="$route.query.id==1" slot="right">删除</span>
              <span v-if="$route.query.id==2" slot="right">取消收藏</span>
            </van-swipe-cell>
          </van-list>
        </div>
      </van-tab>
      <van-tab title="合理化建议">
        <Nodata v-if="isNoData"></Nodata>
        <div v-else class="content-box">
          <van-list v-model="loading" :finished="finished" @load="onLoad2" :offset="0">
            <van-swipe-cell
              :left-width="$route.query.id==1?65:0"
              :right-width="65"
              :on-close="onClose"
              v-for="(item, index) in proposalList"
              :key="index"
              @click="acivt(item)"
            >
              <span slot="left">编辑</span>
              <van-cell-group :border="false">
                <van-cell @click.stop="edit('proposal',item)" :border="false">
                  <template slot="title">
                    <van-row class="container-header" type="flex" justify="space-between">
                      <van-col class="van-ellipsis">
                        <div class="name">
                          <div class="avatar">
                            <img
                              :src="item.portrait?item.portrait:'https://gw.alicdn.com/tfs/TB15Q0lOmzqK1RjSZFHXXb3CpXa-400-400.png'"
                              width="100%"
                              alt
                            >
                          </div>
                          <div class="username">
                            <p class="nams">{{ item.create_username }}</p>
                            <p class="times">{{ item.create_time }}</p>
                          </div>
                        </div>
                        <h2 class="content-title one-txt-cut">{{ item.proposal_title }}</h2>
                      </van-col>
                      <van-col>
                        <div class="content-img" v-if="item.file_path">
                          <img :src="item.file_path" width="100%" alt>
                        </div>
                      </van-col>
                    </van-row>
                  </template>
                </van-cell>
              </van-cell-group>
              <span v-if="$route.query.id==1" slot="right">删除</span>
              <span v-if="$route.query.id==2" slot="right">取消收藏</span>
            </van-swipe-cell>
          </van-list>
        </div>
      </van-tab>
    </van-tabs>
    <van-dialog v-model="show" show-cancel-button @confirm="confirm" @cancel="show=false">
      <div class="text-tips">
        <p>提示文字</p>
        <div class="line"></div>
        <img src="https://gw.alicdn.com/tfs/TB1qvHkbCSD3KVjSZFKXXb10VXa-82-85.png">
        <p class="text">确定要删除此条贴子吗?</p>
      </div>
    </van-dialog>
    <van-dialog v-model="isShow" :show-confirm-button="false">
      <div class="text-tips">
        <p>成功提示</p>
        <div class="line"></div>
        <img src="https://gw.alicdn.com/tfs/TB1qvHkbCSD3KVjSZFKXXb10VXa-82-85.png">
        <p class="text">删除成功</p>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import Nodata from "../public/nodata/Nodata"; // 导入暂无数据组件
import {
  article_listMyCollect,
  article_listMy,
  article_delete,
  decCollectNum
} from "@/api/article";
import { clacTime } from "@/utils";
import {
  proposal_listMy,
  proposal_listMyCollect,
  proposal_delete,
  proposal_decCollectNum
} from "@/api/proposal";
import { close } from "fs";

export default {
  name: "myModulePost",
  components: { Nodata },
  data() {
    return {
      show: false,
      isShow: false,
      isNoData: false,
      loading: false,
      finished: false,
      listQuery: {
        start: 0,
        current: 1,
        limit: 5,
        company_id: localStorage.getItem("companyId")
      },
      dataList: [],
      proposalList: [],
      total: "",
      active: 0,
      acivtId: 0,
      item: {}
    };
  },
  methods: {
    acivt(item) {
      this.acivtId = item.id;
      this.item = item;
    },
    confirm() {
      if (this.active) {
        this.dele();
      } else {
        this.deleCommunity();
      }
    },
    //编辑贴子
    edit(e, item) {
      if (e == "proposal") {
        this.$router.push({
          path: "/proposalDetail",
          query: {
            id: item.id
          }
        });
      }
      if (e == "community") {
        this.$router.push({
          path: "/CommunityDetail",
          query: {
            id: item.id,
            name: "article"
          }
        });
      }
    },
    //帖子
    onCloseCommunity(clickPosition, instance) {
      switch (clickPosition) {
        case "left":
          if (this.$route.query.id == 1) {
            this.$router.push({
              path: "/CommunityTheme",
              query: {
                name: "edit",
                content: this.item
              }
            });
          }
          instance.close();
          break;
        case "cell":
        case "outside":
          instance.close();
          break;
        case "right":
          this.show = true;
          instance.close();
          break;
      }
    },
    //合理化建议
    onClose(clickPosition, instance) {
      switch (clickPosition) {
        case "left":
          if (this.$route.query.id == 1) {
            this.$router.push({
              path: "/proposal",
              query: {
                name: "edit",
                content: this.item
              }
            });
          }
          instance.close();
          break;
        case "cell":
        case "outside":
          instance.close();
          break;
        case "right":
          this.show = true;
          instance.close();
          break;
      }
    },
    // 删除活动贴子
    async deleCommunity() {
      let par = {
        id: this.acivtId
      };
      let { data } =
        this.$route.query.id == 1
          ? await article_delete(par)
          : await decCollectNum(par);
      if (data.status == 100) {
        this.isShow = true;
        this.initList();
        setTimeout(() => {
          this.isShow = false;
        }, 1000);
      }
    },
    // 删除优化建议贴子
    async dele() {
      let par = {
        id: this.acivtId
      };
      let { data } =
        this.$route.query.id == 1
          ? await proposal_delete(par)
          : await proposal_decCollectNum(par);
      if (data.status == 100) {
        this.isShow = true;
        this.fetchList();
        setTimeout(() => {
          this.isShow = false;
        }, 1000);
      }
    },
    //获取数据
    async initList() {
      let user = JSON.parse(localStorage.getItem("user"));
      this.listQuery.create_user = user.id;
      let query = Object.assign(this.listQuery);
      let res =
        this.$route.query.id == 1
          ? await article_listMy(query)
          : await article_listMyCollect(query);
      let result = res.data;
      if (result.status == 100) {
        this.dataList = result.data.rows.map(item => {
          return Object.assign({}, item, {
            create_time: clacTime(item.create_time)
          });
        });
        if (!res.data.data.rows.length) {
          this.isNoData = true;
        }
      }
      this.loading = false;
      if (result.data.results <= this.dataList.length) {
        this.finished = true;
      }
    },
    onLoad() {
      setTimeout(() => {
        this.listQuery.limit += 2;
        this.initList();
      }, 1000);
    },
    clickChange(index) {
      this.active = index;
      this.isNoData = false;
      if (index == 0) {
        this.initList();
      }
      if (index == 1) {
        this.fetchList();
      }
    },
    //获取数据
    async fetchList() {
      let user = JSON.parse(localStorage.getItem("user"));
      this.listQuery.create_user = user.id;
      let params = Object.assign(this.listQuery);
      let proposal_res =
        this.$route.query.id == 1
          ? await proposal_listMy(params)
          : await proposal_listMyCollect(params);
      let proposal_result = proposal_res.data;
      if (proposal_result.status == 100) {
        this.proposalList = proposal_result.data.rows.map(item => {
          return Object.assign({}, item, {
            create_time: clacTime(item.create_time)
          });
        });
        if (!proposal_result.data.rows.length) {
          this.isNoData = true;
        }
      }
      this.loading = false;
      if (proposal_result.data.results <= this.proposalList.length) {
        this.finished = true;
      }
    },
    fmtList(val1, val2) {
      let cache = [];
      let res1 = val1.split(",");
      let res2 = val2.split(",");
      for (let i = 0; i < res1.length; i++) {
        cache[i] = {
          src: res1[i],
          name: res2[i]
        };
      }
      return cache;
    },
    onLoad2() {
      setTimeout(() => {
        this.listQuery.limit += 2;
        this.fetchList();
      }, 1000);
    }
  },
  created() {
    this.initList();
  }
};
</script>

<style lang="scss" scoped>
.nav-bar-box {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}
.content-box {
  background: rgb(243, 248, 252);
  padding: 0 10px;
  .van-cell-group {
    margin-top: 10px;
  }
  .van-cell {
    padding: 0;
    // border-radius: 5px;
  }

  .van-cell-text {
    width: 300px;
    font-size: 16px;
    color: #3a3a3a;
  }
  .van-cell-time {
    font-size: 12px;
    color: #a0a0a0;
  }
}
.group-box .van-cell {
  padding: 0 10px;
  padding-top: 10px;
}
.van-ellipsis {
  padding: 10px;
  max-width: 182px;
  width: 100%;
}
.content-title {
  max-width: 182px;
}
.name {
  display: flex;
  align-items: center;
  font-size: 14px;
  line-height: 14px;
}
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 10px;
}
.username {
  .times {
    font-size: 12px;
    color: #ccc;
    padding-top: 8px;
  }
}
.content-img {
  width: 147px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  // border-radius: 5px;
  overflow: hidden;
}
.title_topic {
  display: inline-block;
  background: #01a0ef;
  color: #fff;
  border-radius: 10px;
  font-size: 12px;
  line-height: 12px;
  padding: 2px 8px;
}
.text-tips {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px 30px;
  color: rgb(7, 157, 251);
  .line {
    width: 100%;
    height: 1px;
    background-color: rgb(7, 157, 251);
    margin: 10px 0;
  }
  img {
    width: 40px;
  }
  .text {
    color: #ccc;
    padding-top: 10px;
    font-size: 14px;
  }
}
</style>
